<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <style>
        table {
            border: 1px solid #e5e5e5;
            border-collapse: collapse;
            text-align: center;
        }

        th {
            background-color: #f7f7f7;
        }

        th,
        td {
            padding: 10px;
            border: 1px solid #e5e5e5;
        }

        button {
            margin: 0 4px;
        }
    </style>
</head>

<body>
    <!-- 要挂载的节点 -->
    <div id="root"></div>
    <!-- 引入依赖 -->
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>
    <script src="./data.js"></script>
    <script src="./format.js"></script>
    <!-- 设置类型为text/babel 否则浏览器无法解析jsx -->
    <script type="text/babel">
        // 1.定义app组件
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    books
                }
            }

            /* getTotalPrice() {
                return this.state.books.reduce((prev, item) => {
                    return prev + item.count * item.price
                }, 0)
            } */

            changeCount(index, count) {
                /* 需要浅拷贝 react官方要求 */
                const newBooks = [...this.state.books]
                newBooks[index].count += count
                this.setState({
                    books: newBooks
                })
            }

            removeBook(index) {
                const newBooks = [...this.state.books]
                newBooks.splice(index, 1)
                this.setState({
                    books: newBooks
                })
            }

            renderHasBook() {
                const { books } = this.state
                /* 计算总价格 */
                const totalPrice = books.reduce((prev, item) => {
                    return prev + item.count * item.price
                }, 0)
                
                return (
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>书籍名称</th>
                                    <th>出版日期</th>
                                    <th>价格</th>
                                    <th>购买数量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    books.map((item, index) => {
                                        return (
                                            <tr key={item.name}>
                                                <td>{index + 1}</td>
                                                <td>{item.name}</td>
                                                <td>{item.date}</td>
                                                <td>{formatPrice(item.price)}</td>
                                                <td>
                                                    {/* 设置按钮禁用 */}
                                                    <button
                                                        disabled={item.count <= 1}
                                                        onClick={() => this.changeCount(index, -1)}
                                                    >
                                                        -</button>
                                                    {item.count}
                                                    <button onClick={() => this.changeCount(index, 1)}>+</button>
                                                </td>
                                                <td>
                                                    <button onClick={() => this.removeBook(index)}>移除</button>
                                                </td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>

                        </table>
                        <h2>总价格：{formatPrice(totalPrice)}</h2>
                    </div>
                )
            }

            renderEmpty() {
                return <h2>购物车列表数据为空，请添加商品！</h2>
            }
            render() {
                const { books } = this.state
                return books.length ? this.renderHasBook() : this.renderEmpty()
            }
        }
        // 2.创建root并且渲染App组件
        const root = ReactDOM.createRoot(document.querySelector("#root"))
        root.render(<App />)
    </script>
</body>

</html>